<template>
  <div>
    comA
    <button @click="handleClick">将默认消息发送给子（隔代）组件</button>
    <br />
    {{ msg }}
    <br />
    <hr />
    <comB />
  </div>
</template>

<script>
import Emitter from '../mixins/emitter';
import comB from './comB.vue'

export default {
  name: 'componentA',
  mixins: [Emitter],
  components: {
    comB
  },
  data () {
    return {
      msg: 'This is the default message .',
      n: 0
    }
  },
  created () {
    this.$on('on-message', this.showMessage)
  },
  methods: {
    showMessage (text) {
      this.msg = text
    },
    handleClick () {
      this.n += 1
      this.broadcast('componentB', 'on-message', `${this.msg}第${this.n}次发送, `)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>